<!--
 * @Author: Neko
 * @Date: 2021-06-24 14:06:04
 * @LastEditTime: 2021-06-25 16:45:40
 * @LastEditors: Neko
-->
<template>
  <view
    class="spec-item__wrap"
    :class="{
      disabled: data.qty === 0
    }"
    @click="onClickItem"
  >
    <view class="spec-item__container">
      <view class="spec-item__left">
        <view class="spec-item__title">
          <text v-if="isShowFirstName" class="first-name">{{ data.specificationMainName }}</text>
           {{ data.specificationOtherName }}
        </view>

        <view v-if="isShowPrice" class="spec-item__price">
          {{ unit }} {{ (+data.price || 0).toFixed(2) }}
        </view>
      </view>

      <view class="spec-item__right">
        <view class="spec-item__stock">
          {{ $t('locales.stock') }}：{{ data.qty }}
        </view>

        <view class="spec-item__stepper">
          <u-number-box
            :value="value"
            :max="data.qty"
            :min="0"
            :disabled="data.qty === 0"
            @change="onChangeStepper"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },

    data: {
      type: Object,
      default: () => ({})
    },

    unit: {
      type: String,
      default: ''
    },

    disabled: {
      type: Boolean,
      default: false
    },

    isShowFirstName: {
      type: Boolean,
      default: false
    },

    isShowPrice: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
    }
  },

  methods: {
    onChangeStepper(e) {
      this.$emit('change', this.data, e.value)
    },

    onClickItem() {
      this.$emit('click', this.data)
    }
  }
}
</script>

<style lang="scss" scoped>
.spec-item__wrap {
  padding: 0 19rpx;

  &.disabled {
    background: #F5F5F5;

    /deep/ .u-number-input {
      border: 1rpx solid #E6E6E6!important;
      margin: 0!important;
      background: #F5F5F5!important;
    }

    /deep/ .u-icon-minus, /deep/ .u-icon-plus {
      height: 55rpx!important;
      border: 1rpx solid #E5E5E5;
      color: #999999!important;
      background: #F5F5F5!important;
      border-radius: 0;
    }
  }
}

.spec-item__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 39rpx 14rpx 23rpx 6rpx;
  border-bottom: 1rpx solid #E0E0E0;

  .spec-item__title {
    max-width: 286rpx;
    margin-bottom: 15rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 28rpx;
    line-height: 32rpx;
    font-weight: 500;
    color: #333;

    .first-name {
      display: inline-block;
      margin-right: 10rpx;
    }
  }

  .spec-item__price {
    font-size: 22rpx;
    line-height: 32rpx;
    color: #999999;
  }

  .spec-item__right {
    display: flex;
    align-items: center;
  }

  .spec-item__stock {
    margin-right: 15rpx;
    font-size: 22rpx;
    line-height: 30rpx;
    color: #999;
  }

  /deep/ .u-number-input {
    border: 1rpx solid #E6E6E6!important;
    margin: 0!important;
    background: #fff!important;
  }

  /deep/ .u-icon-minus, /deep/ .u-icon-plus {
    height: 55rpx!important;
    border: 1rpx solid #E5E5E5;
    color: #999999!important;
    background: #fff!important;
    border-radius: 0;
  }

  /deep/ .u-icon-minus {
    border-right: none!important;
  }

  /deep/ .u-icon-plus {
    border-left: none!important;
  }
}
</style>